<script setup>
import { inject, onMounted, ref } from 'vue'
import { artGetListService } from '../../../api/article'

const $echarts = inject('echarts')
const xdata = ref([])
const ydata = ref([])

//分页条数据模型
const pageNum = ref(1) //当前页
const total = ref(20) //总条数
const pageSize = ref(3) //每页条数
// 获取文章需传的参数
const params = ref({
  pageNum: pageNum.value,
  pageSize: pageSize.value
})
const articles = ref([])
//获取文章列表数据
const articleList = async () => {
  const result = await artGetListService(params.value)
  // 渲染视图
  total.value = result.data.data.total
  params.value.pageSize = total.value
  const result2 = await artGetListService(params.value)
  //   console.log(result2)
  articles.value = result2.data.data.items
}

const setData = () => {
  // 统计"已发布"和"草稿"状态的文章数量
  const publishedCount = articles.value.filter(
    (item) => item.state === '已发布'
  ).length
  const draftCount = articles.value.filter(
    (item) => item.state === '草稿'
  ).length
  xdata.value = ['发布', '草稿']
  ydata.value = [publishedCount, draftCount]
}

onMounted(async () => {
  await articleList()
  setData()

  const myChart = $echarts.init(document.getElementById('threeChart'))
  myChart.setOption({
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: xdata.value
    },
    series: [
      {
        type: 'bar',
        data: ydata.value
      }
    ]
  })
})
</script>

<template>
  <h2>状态统计图</h2>
  <div class="chart" id="threeChart">图标的容器</div>
</template>

<style scope>
.chart {
  width: 350px;
  height: 240px;
}
</style>
